<template>
  <div class="u-login-about-container register-container">
      <div class="login-top-text">
        <p>您好，</p>
        <p>欢迎来到友牧农场</p>
      </div>
      <ul class="register-center">
        <li>
          <input type="tel" placeholder="请输入手机号码" maxlength="11" v-model="phone">
        </li>
        <li>
          <input type="tel" placeholder="请输入验证码" maxlength="4" v-model="authCode">
          <button class="u-send-msg-btn" v-if="!sendMsgFlag" @click="sendMsg" :disabled="sendMsgFlag">{{sendBtnText}}</button>
          <span class="times color-primary" v-if="sendMsgFlag">{{times}}</span>
        </li>
        <li>
          <input :type="inputType" placeholder="请输入6~16位数字字母组合密码" maxlength="16" v-model="password">
          <van-icon :name="iconName" :class="className" @click='changeInputType' />
        </li>
      </ul>
      <div class="agreement-text">
        <van-icon :name="checkedName" :class="checkedClassName" @click="checkFn" />
        阅读且同意<span class="color-primary" @click="jumpView('userAgreement')">《友牧农场用户协议》</span>和<span class="color-primary" @click="jumpView('privacyAgreement')">《隐私保护协议》</span>
      </div>
      <van-button round class="u-btn-default u-bg-gradient-light register-btn" @click="registerFn()">注册</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: '', //手机号码
      authCode: '', //验证码
      password: '', //密码
      sendMsgFlag: false, //发送验证码按钮状态
      sendBtnText: '发送验证码', //发送验证码文字
      times: '60s', //倒计时文字
      changeInputTypeFlag: false, //修改input类型
      inputType: 'password', //input类型
      iconName: 'closed-eye', //图标
      className: 'inp-icon color-gray', //类名
      checkedClassName: 'color-gray checked-icon',
      checkedName: 'circle'
    }
  },
  methods: {
    jumpView(viewName) {
      this.$router.push({
        name: viewName
      })
    },
    changeInputType() { //更换输入框类型
      this.changeInputTypeFlag = !this.changeInputTypeFlag;
      if(this.changeInputTypeFlag){
        this.inputType = 'text';
        this.iconName = 'eye';
        this.className = 'inp-icon color-primary';
      }else{
        this.inputType = 'password';
        this.iconName = 'closed-eye';
        this.className = 'inp-icon color-gray';
      }
    },

    sendMsg() { //发送验证码
      if(!this.$tool.validator.isEmpty(this.phone)){
        this.$tool.toast('请输入手机号')
        return;
      }

      if(!this.$tool.validator.isMobilePhone(this.phone)){ 
        this.$tool.toast('请输入正确的手机号')
        return; 
      }
      this.sendMsgAjax()
    },

    sendMsgAjax() { //验证码请求
      let postData = {
        phone: this.phone,
        smsType: 1
      }
      this.$api.post('/api/sms/send_sms', postData)
        .then((res) => {
          this.sendMsgFlag = true;
          this.countdown();
        })
    },

    countdown() { //倒计时
      let time = 60;
      let t = setInterval(() => {
        time--;
        this.times = `${time}s`;
        if(time <= 0){
          clearInterval(t)
          this.sendBtnText = '重新获取';
          this.sendMsgFlag = false;
          this.times = '60s';
        }
      }, 1000)
    },

    checkFn() { //协议确定
      if(this.checkFlag){
        this.checkFlag = false;
        this.checkedName = 'circle';
        this.checkedClassName = 'color-gray checked-icon';
      }else{
        this.checkFlag = true;
        this.checkedName = 'checked';
        this.checkedClassName = 'color-primary checked-icon';
      }
    },

    registerFn() { //注册
      if(!this.$tool.validator.isEmpty(this.phone)){
        this.$tool.toast('请输入手机号')
        return;
      }

      if(!this.$tool.validator.isMobilePhone(this.phone)){
        this.$tool.toast('请输入正确的手机号')
        return;
      }

      if(!this.$tool.validator.isEmpty(this.authCode)){
        this.$tool.toast('请输入验证码')
        return;
      }

      if(!this.$tool.validator.isMsgCode(this.authCode)){
        this.$tool.toast('请输入4位数字验证码')
        return;
      }

      if(!this.$tool.validator.isEmpty(this.password)){
        this.$tool.toast('请输入密码')
        return;
      }
      
      if(!this.$tool.validator.isPassword(this.password)){
        this.$tool.toast('请输入6~16位数字字母组合密码')
        return;
      }

      if(!this.checkFlag){
        this.$tool.toast('请阅读且同意友牧农场用户协议和隐私保护协议', 2000)
        return;
      }

      this.registerAjax()
    },

    registerAjax() { //注册请求
      let postData = {
        phone: this.phone,
        smsCode: this.authCode,
        pwd: this.$md5(this.password)
      }
      this.$api.post('/api/user/register', postData)
        .then((res) => {
          this.$tool.toast('注册成功')
          this.$store.commit("setToken", res.data.token);
          setTimeout(() => {
            this.$router.push({path: '/loginByAccount'})
          }, 1500);
        })
    }
  },

  mounted() {
    this.$tool.addEventListenerInputFocusout()
  }
}
</script>

<style lang="scss" scoped>
  .register-container {
    .login-top-text {
      font-size: 24px;
      font-weight: 500;
      color: #344047;
      p:first-child {
        padding-top: 50px;
        margin-bottom: 10px;
      }
    }
    .register-center {
      margin-top: 35px;
      li {
        display: flex;
        align-items: center;
        width: 100%;
        height: 60px;
        font-size: 16px;
        border-bottom: 1px solid #f2f2f2;
        input {
          height: 25px;
          flex: 1;
          font-size: 16px;
          outline: none;
          border: none;
          background-color: #fff;
        }
        .inp-icon {
          margin-left: 40px;
          font-size: 20px;
        }
      }
    }
    .agreement-text {
      display: flex;
      align-items: center;
      margin-top: 20px;
      font-size: 12px;
      color: #969C9E;
      .checked-icon {
        margin-right: 4px;
        font-size: 18px;
      }
    }
    .register-btn {
      margin-top: 32px;
    }
  }
</style>